<template>


    <el-avatar :size="100" style=" cursor: pointer;" @click="drawer = true" :src="modelValue">
        <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
    </el-avatar>



    <el-drawer v-model="drawer" title="图库" size="60%">
        <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false" :on-change="onChange">
            <el-icon class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>
        <el-divider border-style="dashed" />

        <el-tabs type="card" v-model="tabName" @tab-change="tabChange">
            <el-tab-pane label="图片" name="1"></el-tab-pane>
            <el-tab-pane label="视频" name="2"></el-tab-pane>
            <el-tab-pane label="文档" name="3"></el-tab-pane>
        </el-tabs>

        <div class="tuku">
            <el-space wrap>
                <div v-for="item in imgData">

                    <el-image class="noimg" :src="getImgUrl(item)" fit="contain" @click="selectImg(item.url)" />
                    <span>{{ getName(item.name) }}</span>
                </div>
            </el-space>
        </div>
    </el-drawer>

</template>
<script lang="ts" setup>

const modelValue = defineModel()
const drawer = ref(false)
const imgData = ref<any>([])
const tabName = ref('1')
onMounted(() => {

    callApi()
})
const getName = (name: string) => {
    return name.split('_')[1]
}
const getImgUrl = (item: any) => {
    let ext = item.name.split('.')[1]

    console.log(ext);
    switch (ext) {

        case 'mp4':
            return '/mp4.png'
        case 'pdf':
            return '/pdf.png';
        case 'docx':
        case 'doc':
            return '/word.png';
        default:
                return item.url
    }
}
const callApi = () => {

    uploadApi.select({ code: tabName.value }).then((res: any) => {
        imgData.value = res
    })
}
const tabChange = () => {

    callApi()
}
const selectImg = (url: string) => {

    modelValue.value = url
    drawer.value = false
}
const onChange = (uploadFile: any, uploadFiles: any) => {

    let fileReader = new FileReader()
    let file = uploadFile.raw

    fileReader.readAsDataURL(file) //会让一个子线程去读  base64
    fileReader.onload = (mm: any) => { //当子线程读取完毕之后会触发onload事件

        uploadApi.upload({ name: file.name, base64: mm.target.result }).then((res: any) => {
            //imgUrl.value = res
            modelValue.value = res
            callApi()
        })

    }

}


</script>
<style scoped>
.noimg {
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.tuku {
    display: flex;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color:
        #8c939d;
    width: 80px;
    height: 80px;
    text-align: center;
}
</style>